<template>
	<div class="banner">
		<swiper
      :indicator-dots='true'
      indicator-color='#EA5A49'
      :autoplay='true'
      :interval='6000'
      :duration='1000'
      :circular='true'
    >
      <div :key='imgindex' v-for='(top,imgindex) in imgUrls'>
        <swiper-item>
          <img  
            @click='bookDetail(img)'
            class='slide-image' 
            mode='aspectFit' 
            v-for='img in top'
            :key='img.id'
            :src="img.image" 
          >
        </swiper-item>
      </div>
    
    </swiper>
	</div>
</template>
<script>
export default {
  name: 'banner',
  props: {
    banner: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    imgUrls () {
      // 如果通用 请用chunk函数  比如lodash的chunk方法
      return [this.banner.slice(0, 3), this.banner.slice(3, 6), this.banner.slice(6)]
    }
  },
  data () {
    return {
    }
  },
  methods: {
    bookDetail (item) {
      console.log(item)
      wx.navigateTo({
        url: `/pages/bookDetail/main?isbn=${item.isbn}`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
	.banner{
		width: 100%;
		margin-top:5px;
		.slide-image{
			width:33%;
			height:250rpx;
		}
	}
</style>